<template>
    <div>
        <h1>等级显示页</h1>
        
        <a href="/ladd">等级新增</a>
        <br>
        <a href="/qshow">权益信息</a>
        <br>
        <a href="/qshow">权益信息</a>
        <br>

        <input type="text" placeholder="等级名称" v-model="page.name">
        <select v-model="page.quanyi">
            <option value="0">请选择权益</option>
            <option v-for="e in XLK"  :value="e.id">{{ e.quanyiName }}</option>
        </select>
        <input type="button" value="查询" @click="chax">
        <table class="table">
           <thead>
                  <tr>
                       <td>等级id</td>
                       <td>等级名称</td>
                       <td>状态</td> 
                       <td>权益</td> 
                       <td>状态修改</td>
                  </tr>
           </thead>
           <tbody>
                 <tr v-for="e in data">
                       <td>{{ e.id }}</td>
                       <td>{{ e.levelName }}</td>
                       <td>{{ e.state?'启用':'禁用' }}</td> 
                       <td>{{ e.quanyiName }}</td> 
                       <td>
                        <input type="button" v-if="e.state?'分配权益':''" value="分配权益" @click="quanyinfo(e.id)">
                        <input type="button" :value="e.state?'禁用':'启用'" @click="upstateinfo(e.id)">
                       </td>
                  </tr>
           </tbody>
       </table>
       一共{{pageinfo.listcount}}页,总共{{pageinfo.count}}条,每页显示{{page.pageSize}}条,当前第{{page.pageIndex}}页
       <input type="button" value="首页" @click="pageid(1)">
       <input type="button" value="下一页" @click="pageid(2)">
       <input v-for="e in pageinfo.listcount" type="button" :value="e" @click="dianji">
       <input type="button" value="上一页" @click="pageid(3)">
       <input type="button" value="首页" @click="pageid(4)">
       <input v-model="page.pageIndex" type='number'><input type="button" value="跳转" @click="tiaozhuan">
       <select v-model="page.pageSize" @click="yrl">
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="8">8</option>
       </select>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

const router=useRouter();

onMounted(()=>{
    show();
    XLKS();
})

//下拉框
const XLK=ref([{
    "id": 3,
    "quanyiName": "免费早饭",
    "qstate": true
  }])

const XLKS=()=>{
    axios.get("https://localhost:7065/api/LevelMember/GetQuan").then(res=>{
      XLK.value=res.data
    })
}


//查询
const chax=()=>{
    show();
}

const tiaozhuan=()=>{
    show();
}
//页容量
const yrl=()=>{
    show();
}

//点击页
const dianji=(val:any)=>{ 
   page.value.pageIndex=val
    show();
}

//页面跳转按钮
const pageid=(val:any)=>{
    if(val==1){
         page.value.pageIndex=1;
         show();
    }
    if(val==2){
         if(page.value.pageIndex<pageinfo.value.listcount)
         {
            page.value.pageIndex+=1;
            show();
         }
    }
    if(val==3){
        if(page.value.pageIndex>1)
         {
            page.value.pageIndex-=1;
            show();
         }
    }
    if(val==4){
         page.value.pageIndex=pageinfo.value.listcount;
         show();
    }
}

const data=ref([ {
      "id": 2,
      "quanyiid": 2,
      "levelName": "白银会员",
      "state": true,
      "quanyiName": "免费洗车"
    }])
const page=ref({
    pageIndex:1,
    pageSize:3,
    name:"", 
    quanyi:0
})
const pageinfo=ref({
    count:0,
    listcount:0,
})

const show=()=>{
    axios.get("https://localhost:7065/api/LevelQuanyi/LevelShow",{params:page.value}).then(res=>{
        data.value=res.data.listcount
        pageinfo.value.count=res.data.count

       pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize)
    })
}

//修改状态
const upstateinfo=(val:any)=>{
  axios.get("https://localhost:7065/api/LevelQuanyi/UpState",{params:{id:val}}).then(res=>{
     if(res.data>0)
     {
        alert('状态修改成功')
        show();
     }
     else{
        alert("状态修改失败")
        return;
     }
  })
}

const quanyinfo=(val:any)=>{
    router.push({path:'/qy',query:{id:val}})
}

</script>

<style scoped>

</style>